<template>
  <div class="integralManage">
    <div class="outermostMargin">
      <div class="carousel">
        <img :src="imgs.header" />
      </div>
      <div class="mainBody">
        <div class="butRow" v-for="(v,i) in buttons" :key="i" @click="jumpTo(v.id)">
          <div class="butName">
            <p class="name">{{v.name}}</p>
            <p class="value" v-if="v.value.length != 0">{{v.value || 0}}</p>
          </div>
          <img :src="imgs.butGraphical" class="butGraphical" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgs: {
        header: require("../../assets/integralManage/header.jpg"),
        butGraphical: require("../../assets/integralManage/falling.png")
      },
      buttons: [
        {
          id: "1",
          name: "我的积分",
          value: "0",
          active: true
        },
        {
          id: "2",
          name: "积分规则",
          value: "",
          active: true
        }
      ]
    };
  },
  created(){
    this.post("/account/getAccountIntegra", {
      userId: this.slow.userInfo ? this.slow.userInfo.openId : "8a4c60a171078ece01710a26363a00cc",
      wxId: this.slow.userInfo? this.slow.userInfo.openId : "8a4c60a171078ece01710a26363a00cc"
    }).then(r => {
      this.buttons[0].value = r.map['积分'];
    })
  },
  methods: {
    jumpTo(val) {
      switch (val) {
        case "1":
          this.$router.push("/integralRanking");
          break;
        case "2":
          this.$router.push("/rule");
          break;
        default:
          this.$toast.fail("该标签尚在开发中");
          setTimeout(() => {
            this.$toast.clear();
          }, 1000);
          break;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/smobile.scss";
.integralManage {
  background: #f5f5f5;
  .outermostMargin {
    background: $sm-bg-color-grey;
    color: $sm-text-color;
    font-size: $sm-font-size-lg;

    overflow: auto;
    // height: calc(100vh - 41px);
    // margin: 41px 0 0 0;

    .carousel {
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
      height: $sm-img-per-mini;
      width: $sm-img-per-max;

      img {
        // height: $sm-img-per-max;
        width: $sm-img-per-max;
      }
    }

    .mainBody {
      display: flex;
      flex-direction: column;
      align-items: center;
      .butRow {
        width: 60%;
        margin: 10px 0 10px 0;
        padding: 0 20px 0 20px;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        background-image: url("../../assets/integralManage/buttonBack.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .butName {
          display: flex;
          flex-direction: row;
          align-items: center;
          .name {
            text-align: center;
            font-size: 20px;
          }
          .value {
            text-align: center;
            font-size: 20px;
            margin: 22px 0 18px 4px;
            color: rgb(248, 148, 76);
          }
        }
        .butGraphical {
          height: 10%;
        }
      }
    }
  }
}
</style>